<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{
            width: 100px;
        }
    </style>
    <script>
        var brr = new Array();
        function f(val) {
            var arr = document.getElementsByClassName('y');
            for (var i = 0; i < arr.length; i++) {
                var n = arr[i];
                if (n.selected==true){
                   brr.push(n.innerHTML);
                }else if (i == arr.length - 1) {
                    try {
                        brr.delete(n.innerHTML);
                    }catch (e) {
                        return;
                    }
                }
            }
        }
        function f1() {
            for (var i = 0; i < brr.length; i++) {
                document.getElementById('tj').innerHTML+= "<option>"+brr[i]+"</option>";
            }
            brr = new Array();
        }
        function f2() {
            var arr = document.getElementsByClassName('y');
            for (var i = 0; i < arr.length; i++) {
                brr.push(arr[i].innerHTML);
            }
            for (var i = 0; i < brr.length; i++) {
                document.getElementById('tj').innerHTML+= "<option>"+brr[i]+"</option>";
            }
            brr = new Array();
        }
    </script>
</head>
<body>
<div style="display:inline-block;">
    <select size="10" multiple="multiple">
        <option class="y" onclick="f()">西施</option>
        <option class="y" onclick="f()">貂蝉</option>
        <option class="y" onclick="f()">王昭君</option>
        <option class="y" onclick="f()">杨玉环</option>
    </select>
</div>
    <div style="display:inline-block;height: 330px;vertical-align: middle; margin-left: 20px;margin-right: 20px ">
    <button onclick="f1()">--></button><br>
    <button onclick="f2()">->></button>
    </div>
    <div style="display:inline-block;">
    <select size="10" multiple="multiple" id="tj">
        <option>闭月</option>
        <option>羞花</option>
        <option>沉鱼</option>
        <option>落雁</option>
    </select>
</div>
</body>
</html>